<template>
  <div>
    <div class="se">
      <label for="" style="line-height:40px">请输入病案号：</label>
      <el-input v-model="myInputVal" class="myInput"></el-input>
      <el-button type="primary" round class="mySeBt" @click="selectOne">搜索</el-button>
    </div>
    <el-table :data="nowData" style="width: 100%">
      <el-table-column align="center" label="医疗卡号">
        <template slot-scope="scope">
          <span>{{ scope.row.personNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span>{{ scope.row.chName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.personSex }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="病案号">
        <template slot-scope="scope">
          <span>{{ scope.row.chNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button size="mini" @click="selectMyXq(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" :page-count="maxPage" :current-page="this.$store.state.MedicalRecords.nowPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <el-dialog title="我的病例" :visible.sync="BlXqVisible" :modal="false">
      <el-table :data="myBlData" style="width: 100%">
        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.chName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="病案号">
          <template slot-scope="scope">
            <span>{{ scope.row.chNum }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="第几次入院">
          <template slot-scope="scope">
            <span>{{ scope.row.chTimes }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="入院时情况">
          <template slot-scope="scope">
            <span v-if="scope.row.chInStatus == 1">{{ '危' }}</span>
            <span v-if="scope.row.chInStatus == 2">{{ '急' }}</span>
            <span v-if="scope.row.chInStatus == 3">{{ '一般' }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="170px">
          <template slot-scope="scope">
            <el-button size="mini" @click="selectMyBlXq(scope.row)">查看详情</el-button>
            <el-button size="mini" @click="upadataBl(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog class="blxq" :title="title" :visible.sync="myBlXqVisible" width="80%" :modal="false">
      <el-form ref="form" :model="form" label-width="80px" style="font-size:12px">
        <div class="mytitle">
          <span>病历详情</span>
        </div>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">医疗卡号：</label>
              <el-input v-model="form.persons.personNo"></el-input>
            </div>
            <div>
              <label for="" class="myla">第几次入院：</label>
              <el-input v-model="form.chTimes"></el-input>
            </div>
            <div>
              <label for="" class="myla">病案号：</label>
              <el-input v-model="form.chNum"></el-input>
            </div>
          </div>
        </el-form-item>
        <div class="myTable">
          <el-form-item>
            <div class="myjuzhong">
              <div>
                <label for="" class="myla">姓名：</label>
                <el-input v-model="form.chName"></el-input>
              </div>
              <!-- <div>
                <label for="" class="myla">性别：</label>
                <el-radio-group v-model="form.chSex" class="mySex">
                  <div v-if="title == '病历详情'">
                    <el-radio v-if="form.chSex == '男'" label="男"></el-radio>
                    <el-radio v-else-if="form.chSex == '女'" label="女"></el-radio>
                  </div>
                  <div v-else-if="title == '修改病历'">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </div>
                </el-radio-group>
              </div> -->
              <div>
                <label for="" class="myla">病理号：</label>
                <el-input v-model="form.chPathologyNum"></el-input>
              </div>
              <div>
                <label for="" class="myla">科别：</label>
                <el-input v-model="form.chDepartment" readonly></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="myjuzhong">
              <div>
                <label for="" class="myla">床号：</label>
                <el-input v-model="form.chBed"></el-input>
              </div>
              <div>
                <label for="" class="myla">X光号：</label>
                <el-input v-model="form.chXRayNum"></el-input>
              </div>
              <div>
                <label for="" class="myla">心电图号：</label>
                <el-input v-model="form.chCardiographNum"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="myjuzhong">
              <div>
                <label for="" class="myla">脑电图号：</label>
                <el-input v-model="form.chElectroencephogramNum"></el-input>
              </div>
              <div>
                <label class="myla">入院时情况：</label>
                <el-select v-model="form.chInStatus" placeholder="请选择入院情况">
                  <el-option label="危" value="1"></el-option>
                  <el-option label="急" value="2"></el-option>
                  <el-option label="一般" value="3"></el-option>
                </el-select>
              </div>
              <div>
                <label class="myla">出院时情况：</label>
                <el-select v-model="form.chOutStatus" placeholder="请选择入院情况">
                  <el-option label="治愈" value="1"></el-option>
                  <el-option label="好转" value="2"></el-option>
                  <el-option label="未愈" value="3"></el-option>
                  <el-option label="未治" value="4"></el-option>
                  <el-option label="死亡" value="5"></el-option>
                  <el-option label="其他" value="6"></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <span>治疗经过：</span>
            <el-input type="textarea" v-model="form.chCureCourse"></el-input>
          </el-form-item>
          <el-form-item>
            <span>出院医嘱：</span>
            <el-input type="textarea" v-model="form.chOutDoctorAdvice"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="myjuzhong">
              <div>
                <label for="" class="myla">主任医师签名：</label>
                <el-input v-model="form.chSignatureDirectorDoctor"></el-input>
              </div>
              <div>
                <label for="" class="myla">主治医师签名：</label>
                <el-input v-model="form.chSignatureChargeDoctor"></el-input>
              </div>
              <div>
                <label for="" class="myla">住院医师签名：</label>
                <el-input v-model="form.chSignatureHouseDoctor"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="myjuzhong">
              <div>
                <label for="" class="myla">实习医师签名：</label>
                <el-input v-model="form.chSignatureIntern"></el-input>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div class="myButton">
        <el-button v-if="title == '修改病历'" type="primary" round @click="upDataBlQd">确定修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import tishi from '../../../mixins/tishi';
// import BingliXq from './Binglixq';

export default {
  mixins: [tishi],
  components: {
    // BingliXq,
  },
  data() {
    return {
      BlXqVisible: false,
      myBlXqVisible: false,
      myBlData: [],
      form: {
        persons: {},
      },
      zanshiData: {
        personNo: '',
        chSex: '',
      },
      title: '',
      myInputVal: '',
    };
  },
  created() {
    this.selectBlData();
  },
  computed: {
    ...mapGetters({ maxPage: 'bingli/maxPage', nowData: 'bingli/nowData' }),
  },
  watch: {
    myVal: function() {
      this.myInputVal = '';
    },
  },
  methods: {
    ...mapActions(['tongyong', 'bingli/selectBrData']),
    selectBlData() {
      this['bingli/selectBrData']({
        name: 'SELECT_BLBR',
        data: {
          doctorNo: 'Z00001',
        },
      });
    },
    handleCurrentChange(val) {
      this.$store.state.bingli.nowPage = val;
    },
    selectMyXq(data) {
      this.BlXqVisible = true;
      this['tongyong']({
        name: 'SELECT_BLBYID',
        data: {
          doctorNo: 'Z00001',
          chNum: data.chNum,
        },
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myBlData = [...resp.data.data];
        }
      });
    },
    selectMyBlXq(data) {
      this['tongyong']({
        name: 'SELECT_BlMYALLDATA',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.form = { ...resp.data.data };
          this.myBlXqVisible = true;
          this.title = '病历详情';
        }
      });
    },
    upadataBl(data) {
      this['tongyong']({
        name: 'SELECT_BlMYALLDATA',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.form = { ...resp.data.data, ...this.zanshiData };
          this.myBlXqVisible = true;
          this.title = '修改病历';
        }
      });
    },
    upDataBlQd() {
      this.deleteDataTy(
        {
          name: 'UPDATA_MYBL',
          data: this.form,
        },
        '修改'
      ).then(resp => {
        if (resp.data.code == 200) {
          this.selectMyXq(this.form);
        }
      });
    },
    selectOne() {
      this['tongyong']({
        name: 'SELECT_BLBYID',
        data: {
          doctorNo: 'Z00001',
          chNum: this.myInputVal,
        },
      }).then(resp => {
        console.log(resp);
        this.BlXqVisible = true;
        this.myBlData = [...resp.data.data];
      });
    },
  },
};
</script>
<style lang="less" scoped>
.blxq {
  * {
    padding: 0;
    margin: 0;
  }
  .myla {
    display: inline-block;
    width: 98px;
    text-align: right;
  }
  .mylang {
    display: inline-block;
    width: 160px;
    text-align: right;
  }
  .myjuzhong {
    display: flex;
    justify-content: space-between;
  }
  .twoJz {
    display: flex;
  }
  .el-radio {
    margin-right: 10px;
  }
  .mytitle {
    // position: absolute;
    // left: 50%;
    // transform: translateX(-50%);
    font-size: 20px;
    text-align: center;
  }
  /deep/.el-input {
    width: 200px;
    .el-input__inner {
      height: 25px;
    }
  }
  /deep/.el-form-item__content {
    width: 100%;
    margin-left: 0 !important;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .myTable {
    padding: 10px 60px;
    border: 1px solid rgba(129, 129, 129, 0.4);
  }
  .mySex {
    width: 200px;
  }
  .goback {
    float: right;
    margin-right: 5%;
  }
  .myTop {
    overflow: hidden;
  }
}
.myButton {
  margin-top: 20px;
  text-align: center;
}
.se {
  display: flex;
  margin-bottom: 20px;
  /deep/.myInput {
    width: 20%;
  }
  .mySeBt {
    margin-left: 40px;
  }
}
</style>
